<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算里程</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=feOy08GjBOLC83Ty77FIO4TdGQPhU3uO"></script>
		<style type="text/css">
	       #container{
	           width: 885px;
	           height: 500px;
           	   overflow: hidden;
	       }
	       .layui-form-item {
			    margin-bottom: 0;
			}
			.layui-form-item {
			    clear: both;
			}
			.layui-inline {
			    margin-bottom: 5px;
			    margin-right: 10px;
			}
			.layui-inline {
			    vertical-align: middle;
			}
			.layui-inline {
			    position: relative;
			}
			.layui-inline {
			    display: inline-block;
			}
			.layui-input {
			    display: block;
			    width: 100%;
			    padding-left: 10px;
			}
			.layui-input {
			    height: 32px;
			    line-height: 1.3;
			    border-width: 1px;
			    border-style: solid;
			    background-color: #fff;
			    border-radius: 2px;
			}
			.layui-btn {
				margin-left: 10px;
			    transition: none;
			}
			.layui-btn {
			    display: inline-block;
			    height: 32px;
			    line-height: 32px;
			    background-color: #009688;
			    color: #fff;
			    white-space: nowrap;
			    text-align: center;
			    font-size: 12px;
			    border: none;
			    border-radius: 2px;
			    cursor: pointer;
			}
			.layui-field-title {
			    border-width: 1px 0 0;
			}
			
			.layui-elem-field {
			    padding: 0;
			    border-style: solid;
			}
			fieldset {
			    display: block;
			    margin-inline-start: 2px;
			    margin-inline-end: 2px;
			    padding-block-start: 0.35em;
			    padding-inline-start: 0.75em;
			    padding-inline-end: 0.75em;
			    padding-block-end: 0.625em;
			    min-inline-size: min-content;
			}
			.layui-elem-field legend {
			    margin-left: 20px;
			    padding: 0 10px;
			    font-size: 12px;
			    font-weight: 600;
			}
			legend {
			    display: block;
			    padding-inline-start: 2px;
			    padding-inline-end: 2px;
			    border-width: initial;
			    border-style: none;
			    border-color: initial;
			    border-image: initial;
			}
		</style>
	</head>
	<body>
                        <div class="layui-form-item">
				            <div class="layui-inline">
				                <input id="mileageTraveled" class="layui-input" type="text" placeholder="输入公里数"/>
				            </div>
				            <div class="layui-inline">
				                <button id="confirm" type="button" class="layui-btn" onclick="confirm()">确定</button>
				            </div>
				            <div class="layui-inline">
				                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
							    	<legend>公里数：<span id="mileageTraveleds">0</span></legend>
							  	</fieldset>
				            </div>
				            <div class="layui-inline">
				                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
							    	<legend>时间：<span id="timetongxing">0</span>分钟</legend>
							  	</fieldset>
				            </div>
                        </div>
        <div id='container'></div>
	</body>
	<script type="text/javascript">
	    function GetUrlByParamName(name){
	        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	        var URL =  decodeURI(window.location.search);
	        var r = URL.substr(1).match(reg);
	        if(r!=null){
	            //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
	            return  decodeURI(r[2]);
	        };
	        return null;
	    };
	    
		$.ajax({
		    url:'${ctxPath}/transportReceipt/findlist_transportSet',
		    type:'post',
		    dataType:'json',
		    data:{"dispatchNumber":GetUrlByParamName("dispatchNumber")},
		    success:function(data){
				var list= data.data
				/* if(list.length > 0){
					$.ajax({
					    url:'https://api.map.baidu.com/directionlite/v1/driving?ak=feOy08GjBOLC83Ty77FIO4TdGQPhU3uO&origin=41.752449928713254,123.2017576139354&destination=41.52891603188376,121.2498380153761&waypoints=41.534082455183345,121.24953914913293&plate_number=辽A82DX2',
					    type:'get',
					    dataType:'json',
					    data:{},
					    success:function(data){
						 	console.log(data)
					    },
					    error: function(data){
							alert("调用路线规划接口出错!"+data);
					    }
					});
				} */
				if(list.length > 0){
					var setLongitude = ""
					var setLatitude = ""
					
					var getLongitude = ""
					var getLatitude = ""
					var waypoints = []
					for (var i = 0; i < list.length; i++) {
						if(list[i].setLongitude == '' || list[i].setLongitude == null){
							alert(list[i].setUnit+"经纬度为空！计算失败");
							return
						}
						if(list[i].getLongitude == '' || list[i].getLongitude == null){
							alert(list[i].getUnit+"经纬度为空！计算失败");
							return
						}
						setLongitude = list[i].setLongitude
						setLatitude = list[i].setLatitude
						if(list.length == (i+1)){
							getLongitude = list[i].getLongitude
							getLatitude = list[i].getLatitude
						} else {
					        var way = new BMapGL.Point(list[i].getLongitude,list[i].getLatitude);
					        waypoints.push(way)
						}
					}

				    var map = new BMapGL.Map('container');
					map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
				    map.centerAndZoom(new BMapGL.Point(setLongitude,setLatitude), 12);

			        var searchComplete = function (results){
			            if (transit.getStatus() != BMAP_STATUS_SUCCESS){
			                return ;
			            }
			            var plan = results.getPlan(0);
						var mileageTraveled = plan.getDistance(true).replace("公里","")
						if (/\u7C73/.test(mileageTraveled)) {
							// \u7C73 是“米”的Unicode编码   //正则表达式  .test 如果正则表达式中有米 返回true
							var match = mileageTraveled.match(/\d+/);
							if (match && match.length > 0) {
								var meterValue = parseInt(match[0]); // 提取到的数字，并转换为整数
								var mileageTraveled = meterValue / 1000;
								$("#mileageTraveled").val(mileageTraveled.toFixed(2));
							}
						}else {
							$("#mileageTraveled").val(plan.getDistance(true).replace("公里", ""))//获取距离
							$("#mileageTraveleds").text(plan.getDistance(true))//获取距离
							$("#timetongxing").text(plan.getDuration(true))//获取时间
						}
			        }
			        var transit = new BMapGL.DrivingRouteLine(map, {renderOptions: {map: map},
			            onSearchComplete: searchComplete
			        });
			        var start = new BMapGL.Point(setLongitude,setLatitude);
			        var end = new BMapGL.Point(getLongitude,getLatitude);
			        transit.search(start, end, {
			            waypoints: waypoints
			        });
				}
		    },
		    error: function(data){
				alert("查询收货客户经纬度异常!");
		    }
		});
        
	    function confirm(){
			parent.submit = 1
	    	parent.TDispatchInfoDlg.data.mileageTraveled = $("#mileageTraveled").val();//公里数
	    	var Index = parent.layer.getFrameIndex(window.name);
	        parent.layer.close(Index);
	    }
	</script>
</html>
